const db = wx.cloud.database()

const getPageXY = (event) => {
  return {
    pageX: event.changedTouches[0].pageX,
    pageY: event.changedTouches[0].pageY
  }
}

let startX = 0,
  startY = 0

const ViewCount = 2

Page({
  data: {
    archiveList: [],
    factionList: [],
    storyList: [],
    characterList: [],
    currentFactionIndex: -1,
    factionItemIndex: -1,
    isActiveCharacter: false,
    scrollFlag: false,
    toView: 'view-0',
    currentViewIndex: 0,
    currentStoryIndex: 0,
    showSideBar: true,
    showDialog: false,
    sideList: ['干员', '世界观', '档案']
  },
  onLoad() {
    this.getData()
  },
  getData() {
    db.collection('arknights').get().then(res => {
      if (res.data.length) {
        const {
          archiveList,
          factionList,
          storyList
        } = res.data[0]
        console.log(res.data[0])
        this.setData({
          archiveList,
          factionList,
          storyList,
        })
      }
    })
  },
  onChangeCurFaction(e) {
    const {
      index
    } = e.currentTarget.dataset
    this.setData({
      currentFactionIndex: index,
      factionItemIndex: index !== undefined ? index : -1,
      characterList: index !== undefined ? this.data.factionList[index].characters : []
    })
  },
  onChangeActive() {
    this.setData({
      isActiveCharacter: !this.data.isActiveCharacter
    })
  },
  changeCurrentStory(e) {
    const {
      index
    } = e.currentTarget.dataset
    this.setData({
      currentStoryIndex: index,
      showDialog: true,
    })
  },
  closeDialog() {
    this.setData({
      showDialog: false,
    })
  },
  changeSide(e) {
    const {
      index
    } = e.currentTarget.dataset
    if (this.data.currentViewIndex === index) {
      return
    }
    this.setData({
      scrollFlag: true,
    }, () => {
      this.setData({
        currentViewIndex: index,
        toView: `view-${index}`
      }, () => {
        this.setData({
          scrollFlag: false,
        })
      })
    })
  },
  resetFactionIndex() {
    this.setData({
      currentFactionIndex: -1
    })
  },
  touchstart(event) {
    const touch = getPageXY(event);
    startX = touch.pageX;
    startY = touch.pageY;
  },
  touchend(event) {
    const touch = getPageXY(event);
    const deltaX = touch.pageX - startX;
    const deltaY = touch.pageY - startY;

    let direction = -1;
    if (Math.abs(deltaX) > 3 * Math.abs(deltaY) && Math.abs(deltaX) > 30) {
      direction = deltaX > 0 ? 2 : 0;
    } else if (Math.abs(deltaY) > 3 * Math.abs(deltaX) && Math.abs(deltaY) > 30) {
      direction = deltaY > 0 ? 3 : 1;
    }
    if (direction === 0 || direction === 2) {
      const flag = direction === 0 ? true : false

      if (flag === this.data.showSideBar) {
        return
      }
      this.setData({
        showSideBar: flag,
      })
    } else if (direction === 1 || direction === 3) {
      this.setData({
        scrollFlag: true
      }, () => {
        const isNext = direction === 1 ? true : false

        if (isNext) {
          const nextIndex = this.data.currentViewIndex + 1
          if (nextIndex > ViewCount - 1 + 1) {
            this.setData({
              scrollFlag: false
            })
            return
          } else {
            this.setData({
              currentViewIndex: nextIndex,
              toView: `view-${nextIndex}`
            }, () => {
              this.setData({
                scrollFlag: false
              })
            })
          }
        } else {
          const prevIndex = this.data.currentViewIndex - 1
          if (prevIndex < 0) {
            this.setData({
              scrollFlag: false
            })
            return
          } else {
            this.setData({
              currentViewIndex: prevIndex,
              toView: `view-${prevIndex}`
            }, () => {
              this.setData({
                scrollFlag: false
              })
            })
          }
        }
      })
    }
  },
})